<template>
  <!-- #ifdef APP-NVUE -->
  <text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">
    {{ unicode }}
  </text>
  <!-- #endif -->
  <!-- #ifndef APP-NVUE -->
  <text
    :style="{ color: color, 'font-size': iconSize }"
    class="uni-icons"
    :class="['uniui-' + type, customPrefix, customPrefix ? type : '']"
    @click="_onClick"
  ></text>
  <!-- #endif -->
</template>

<script lang="ts" setup>
import icons from './icons'

withDefaults(
  defineProps<{
    color?: string
    customPrefix?: string
    size?: string | number
    type?: string
  }>(),
  {
    color: '',
    customPrefix: '',
    type: '',
    size: 16,
  },
)
const state = reactive({
  icons: icons.glyphs,
})
const iconSize = computed(() => {
  return ''
})
const unicode = computed(() => {
  return ''
})
function _onClick() {}
</script>

<style lang="scss" scoped>
/* #ifndef APP-NVUE */
@import './uniicons.css';
@font-face {
  font-family: uniicons;
  src: url('./uniicons.ttf') format('truetype');
}
/* #endif */
.uni-icons {
  font-family: uniicons;
  text-align: center;
  text-decoration: none;
}
</style>
